<template>
  <div>
    <canvas
      id="moveclip"
      width="600px"
      height="600px"
      style="background-color: red"
    ></canvas>
  </div>
</template>
<script setup lang="ts">
  // 在MovieClip（通常用于Flash和其他动画或游戏开发环境）中，label（标签）的作用是提供一种方式，使得开发者可以更容易地引用或跳转到动画序列中的特定帧。
  // 具体来说，MovieClip中的label通常与gotoAndStop或gotoAndPlay等方法一起使用，以快速定位到并停止或开始播放动画的某个特定部分。
  // 在编程上，你可以通过addLabel方法将一个标签（一个字符串）添加到特定的帧索引上。当播放到达这个索引时，MovieClip可以派发一个与这个标签相关的事件。例如，在Flash的ActionScript 3.0中，你可以这样使用addLabel方法：
  // actionscript
  // myMovieClip.addLabel("myLabel", 10);
  // 这将在第10帧上添加一个名为"myLabel"的标签。然后，你可以使用gotoAndStop方法快速跳转到这个标签：
  // actionscript
  // myMovieClip.gotoAndStop("myLabel");
  // 这将使MovieClip跳转到第10帧并停止播放。
  const init = () => {
    const stage = new createjs.Stage('moveclip')
    // createjs.Ticker.setFPS(60)
    createjs.Ticker.addEventListener('tick', stage)
    const circle1 = new createjs.Shape(
      new createjs.Graphics().beginFill('#999999').drawCircle(30, 30, 30)
    )
    const circle2 = new createjs.Shape(
      new createjs.Graphics().beginFill('#33333').drawCircle(30, 30, 30)
    )
    const movieClip = new createjs.MovieClip({
      loop: -1,
      startPosition: 10,
      // mode: 2
      labels: { myLabel: 20 }
    })
    stage.addChild(movieClip)
    // const tween1 = new createjs.Tween(circle1, {})
    //   .to({ x: 0 })
    //   .to({ x: 200, y: 100 })
    //   .to({ x: 0, y: 100 })
    movieClip.timeline.addTween(
      createjs.Tween.get(circle1)
        .to({ x: 0 })
        .to({ x: 300 }, 300)
        .to({ x: 0 }, 300)
    )
    movieClip.timeline.addTween(
      createjs.Tween.get(circle2)
        .to({ x: 300 })
        .to({ x: 0 }, 300)
        .to({ x: 300 }, 300)
    )
    movieClip.gotoAndPlay()
    setTimeout(() => {
      movieClip.gotoAndStop('myLabel') //停止动画在某位置
    }, 2000)
  }
  onMounted(() => {
    nextTick(() => {
      init()
    })
  })
</script>
<style scoped></style>
